<script setup lang="ts">


import {onMounted, ref} from "vue";

import { useRouter } from "vue-router";



const router = useRouter();
const onClickLeft = () => {
  router.push('/learn')
}


const list = ref<{
  pathName: string;
  pathId: number;
}[]>([
  {
    pathName: "C语言基础-第一个C程序",
    pathId: 1
  },
  {
    pathName: "C语言基础-简单程序分析",
    pathId: 2
  },
  {
    pathName: "C语言基础-基本算法",
    pathId: 3
  },
  {
    pathName: "C语言中的输入输出函数",
    pathId: 4
  },
  {
    pathName: "C语言流程控制语句",
    pathId: 5
  },
  {
    pathName: "C语言数组——一维数组",
    pathId: 6
  },
  {
    pathName: "C语言数组——二维数组",
    pathId: 7
  },
  {
    pathName: "C语言数组——字符数组",
    pathId: 8
  },
  {
    pathName: "C语言中常用的6个字符串处理函数",
    pathId: 9
  },
  {
    pathName: "C语言核心技术——函数",
    pathId: 10
  },
  {
    pathName: "基础进阶——指针",
    pathId: 11
  },
  {
    pathName: "高级篇——结构体",
    pathId: 12
  },
]);

onMounted(() => {
  clickClick();
});

const clickClick = () => {

};

const click1 = (id: number) => {
  router.push({
    path: '/video',
    query: {
      id: id
    }
  })
};


</script>

<template>
  <van-nav-bar class="nav-bar"
               title="学习路线"
  >
  </van-nav-bar>

  <div id="building">
    <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft" />
    <div id="background-wrapper">

      <div id="background-container">
        <img ref="bgImage" alt="" src="../assets/最终展示章节.png" class="background-img" />
      </div>
      <div id="back-ima">
        <img ref="bgImage" alt="" src="../assets/最终章节展示背景.png" class="back-img" />
      </div>
      <div id="back-character">
        <img ref="bgImage" alt="" src="../assets/最终弹出框人物立绘.png" class="character-img" />
        <img ref="bgImage" alt="" src="../assets/最终人物立绘1.png" class="character-img" style="left: 355%" />
      </div>

      <div id="show-text">

        <van-button size="large" class="item" style="left: 20%" @click="click1(1)">{{list[0].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 40%" @click="click1(2)">{{list[1].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 60%" @click="click1(3)">{{list[2].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 80%" @click="click1(4)">{{list[3].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 100%" @click="click1(5)">{{list[4].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 120%" @click="click1(6)">{{list[5].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 140%" @click="click1(7)">{{list[6].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 160%" @click="click1(8)">{{list[7].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 180%" @click="click1(9)">{{list[8].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 200%" @click="click1(10)">{{list[9].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 220%" @click="click1(11)">{{list[10].pathName}}</van-button>
        <van-button size="large" class="item" style="left: 240%" @click="click1(12)">{{list[11].pathName}}</van-button>
      </div>

    </div>
  </div>
</template>

<style scoped>

.item {
  background-image: url("../assets/最终路线按钮框.png");
  font-size: 16px;

  opacity: 0.8;
  font-family: "Microsoft YaHei",math;

  z-index: 100;
  writing-mode:vertical-lr;
  width: 10%;
  height:35%;
  position: absolute;
  top: 30%;
  left: 25%;
}
.list{
  width: 300%;
  height: 60%;
}

#building {
  width: 100%;
  height: 100%;
}
#show-text {
  width: 380%;
  height: 60%;
  top: 10%;
}

#background-wrapper {
  overflow-y: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
.background-img {
  width: 380%;
  height: 60%;
  position: absolute;
  top: 10%;
  z-index: 2;
}
.back-img {
  width: 380%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}

.character-img {
  width:20%;
  height: 20%;
  position: absolute;
  top: 60%;
  left: 2%;
  z-index: 3;
}

#background-container {
  top: 46px;
  width: 100%;
  height: 100%;
  position: relative;
}

.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity:1;
  z-index:1;
}
.back-btn1 {
  position:fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index:2;
}

</style>